<template>
  <a-space>
    <FCSelect
      :value="province"
      placeholder="省"
      :fcstyle="{ width: '200px' }"
      :optionsApi="getProvince"
      @change="changeProvince"
    ></FCSelect>
    <FCSelect
      :value="city"
      placeholder="市"
      :fcstyle="{ width: '200px' }"
      :options="cityOptions"
      :loading="cityLoading"
      @change="changeCity"
    ></FCSelect>
    <FCSelect
      :value="area"
      placeholder="区"
      :fcstyle="{ width: '200px' }"
      :options="areaOptions"
      :loading="areaLoading"
      @change="changeArea"
    >
    </FCSelect>
    <FCInput
      :value="address"
      placeholder="地址"
      @change="changeAddress"
    ></FCInput>
  </a-space>
</template>
<script>
import FCSelect from '@/vendors/fc-ui/src/controls/FCSelect.vue'
import FCInput from '@/vendors/fc-ui/src/controls/FCInput.vue'
import { getProvince, getCity, getArea } from '@/apis/centralizedPaymentApi'

export default {
  name: 'AddressDemo',
  components: {
    FCSelect,
    FCInput,
  },
  data() {
    return {
      getProvince,
      getCity,
      getArea,
      //省
      province: null,
      //市
      city: null,
      //区
      area: null,
      cityOptions: [],
      areaOptions: [],
      address: '',
      cityLoading: false,
      areaLoading: false,
    }
  },
  methods: {
    async changeProvince(newValue) {
      this.province = newValue
      this.city = null
      this.area = null
      this.areaOptions = []
      if (this.province) {
        this.cityLoading = true
        this.cityOptions = await getCity(this.province)
        this.cityLoading = false
      } else {
        this.cityOptions = []
      }
      this.$emit('changeProvince', this.province)
    },
    async changeCity(newValue) {
      this.city = newValue
      this.area = null
      if (this.city) {
        this.areaLoading = true
        this.areaOptions = await getArea(this.city)
        this.areaLoading = false
      } else {
        this.areaOptions = []
      }
      this.$emit('changeCity', this.city)
    },
    changeArea(newValue) {
      this.area = newValue
      this.$emit('changeArea', this.area)
    },
    changeAddress(newValue) {
      this.address = newValue
      this.$emit('changeAddress', this.address)
    },
  },
}
</script>